<template>
  <div >
    <!--
        v-model 加载状态 false不显示加载中 true显示加载中
         :finished true就不会调用加载函数 false就是可以加载
         load:滑动到底时触发的函数
         offset：距离底部多少距离时触发
          :immediate-check="false" 打开页面的时候不触发
        -->
<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
  :immediate-check="false"
>
<!-- 渲染的房子数据列表 -->
<van-card
@click="det(item)"
v-for="(item,index) in hours" :key="index"
  :price="item.price"
  :desc="item.desc"
  :title="item.title"
  :thumb="`http://liufusong.top:8080` +item.houseImg"
>
  <template #tags>
    <van-tag plain type="danger"
    v-for="(item,index) in item.tags" :key="index">
      {{item}}
     </van-tag>

  </template>
</van-card>
   <!-- 加载状态 -->
      <div class="loading" v-if="hide">
      <van-loading size="24px" vertical>加载中...</van-loading>
      </div>
</van-list>
  </div>
</template>

<script>
import { inquireHouses } from '@/api'
// 兄弟传值 引入bus
import bus from '@/EventBus'
export default {

  data () {
    return {
      // 控制加载提示的显示
      hide: true,
      list: [],
      listId: '',
      moreId: '',
      hours: [],
      Label: [],
      areaId: '',
      rentTypeId: '',
      priceId: '',
      startId: 1, // 开始项
      endId: 10, // 结束项
      loading: false,
      finished: false
    }
  },
  async created () {
    // 根据条件查询房屋
    const id = JSON.parse(localStorage.getItem('id'))
    const req = await inquireHouses({
      cityId: id.value
    })

    this.hours = req.data.body.list

    bus.$on('value', async (area, rentType, price, more) => {
      console.log(666)
      this.hide = true
      this.rentTypeId = rentType
      this.areaId = area
      this.priceId = price
      this.moreId = more
      const res = await inquireHouses({
        rentType: this.rentTypeId,
        area: this.areaId,
        price: this.priceId,
        more: this.moreId,
        start: this.startId,
        end: this.endId
      })
      console.log(res)

      this.hours = res.data.body.list
    })
  },
  watch: {
    hours () {
      this.hide = false
    }
  },
  methods: {
    onLoad () {
      this.loading = true
      console.log('到底了~')
      this.housingDataList()
    },
    async housingDataList () {
      this.endId = this.endId + 10
      this.startId = this.startId + 10
      const res = await inquireHouses({
        area: this.areaId,
        rentType: this.rentTypeId,
        price: this.priceId,
        start: this.startId,
        end: this.endId
      })
      console.log(res)
      // 如果数据渲染完了
      if (res.data.body.list.length === 0) {
        // 为true就不会调用函数
        this.finished = true
      } else {
        this.hours = [...this.hours, ...res.data.body.list]
        this.loading = false
      }
    },
    det (item) {
      this.$router.push({
        path: '/Detail',
        query: {
          name: item.houseCode
        }
      })
      // console.log(item.houseCode)
    }
  }
}
</script>

<style scoped>
.loading {
  padding-top: 20px;
  margin: 0 auto;
  background-color: #000;
  opacity: 0.5;
  width: 80px;
  height: 80px;
  border-radius: 7px;
  position: fixed;
  top: 280px;
  left: 150px;
}
</style>
